<template>
  <Header></Header>

  <!-- 主区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 分类列表 -->
        <CategoryListCard></CategoryListCard>
      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">
        <div class="sticky top-[5.5rem]">
          <!-- 博主信息 -->
          <UserInfoCard></UserInfoCard>

          <!-- 标签 -->
          <TagListCard></TagListCard>
        </div>
      </aside>
    </div>
  </main>
  <!-- 返回顶部 -->
  <ScrollToTopButton></ScrollToTopButton>
  <!-- Footer直接加固定定位属性 -->
  <Footer style="position: fixed; bottom: 0; left: 0; right: 0; width: 100%" />
</template>

<script setup>
  import Header from "@/layouts/frontend/components/Header.vue";
  import Footer from "@/layouts/frontend/components/Footer.vue";
  import UserInfoCard from "@/layouts/frontend/components/UserInfoCard.vue";
  import TagListCard from "@/layouts/frontend/components/TagListCard.vue";
  import CategoryListCard from "@/layouts/frontend/components/CategoryListCard.vue";
  import ScrollToTopButton from "@/layouts/frontend/components/ScrollToTopButton.vue";
</script>
